<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css">

    <script type="text/javascript" src="../js/ztree/jquery.ztree.all-3.5.js"></script>
    <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css">
    <script>
        $(function () {
            var setting={
                data:{
                    simpleData:{
                        enable:true
                    }
                },
                callback:{
                    onClick:function (event,treeId,treeNode,clickFlag) {
                        if(treeNode.page!=undefined&&treeNode.page!='') {
                            if($("#tabs").tabs('exists',treeNode.name)){
                                $("#tabs").tabs('select',treeNode.name)
                            }else {
                                $("#tabs").tabs('add',{
                                    title:treeNode.name,
                                    content:'<iframe src="'+treeNode.page+'" style="height: 100%;width: 100%"></iframe>',
                                    closable:true
                                });

                            }

                        }


                    }

                }
            };

            var nodes=[
                {id:1,pId:0,name:'父节点1'},
                {id:2,pId:0,name:'父节点2'},
                {id:11,pId:1,name:'传智播客',page:'https://www.itcast.com'},
                {id:12,pId:1,name:'百度',page:'http://www.baidu.com'},
                {id:13,pId:2,name:'子节点3'},
                {id:14,pId:2,name:'子节点4'}
            ];
            $.fn.zTree.init($("#tree"),setting,nodes);




        });
    </script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div>

<div data-options="region:'south',title:'South Title',split:true" style="height:200px;"></div>

<div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>

<div data-options="region:'west',title:'导航',split:true" style="width:200px;">
    <div class="easyui-accordion" data-options="fit:true" >
        <div  data-options="title:'菜单1'" style="height: 20px;width: 200px">
            <ul id="tree" class="ztree"></ul>
        </div>
        <div  data-options="title:'菜单2'" style="height: 20px;width: 200px">内容2</div>
    </div>

</div>

<div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;">
    <div class="easyui-tabs" data-options="fit:true" id="tabs">
        <div data-options="closable:true,title:'选项卡1'"></div>
        <div data-options="closable:true,title:'选项卡1'"></div>
    </div>
</div>


</body>
</html>